<script setup>
import { Refresh, Down } from '@icon-park/vue-next'
import Table from './table.vue'
import Tree from './tree.vue'

const router = useRouter()
const route = useRoute()

const status = reactive({
    showId: false,//显示列表id
    isOpen: false,//类型全部展开
    loadTip: '加载中...',//列表加载时的提示
})
const data = reactive({
    routePath: route.path,//以供onBeforeUnmount使用
    tree: [],//列表数据
    list: [],//树形结构转换成列表后的数据
    search: {//搜索
        name: '',//类型名称
    }
})

onMounted(() => {
    //读取本地数据
    const pageAction = func.jsonStorage(data.routePath)
    status.showId = pageAction.showId || false
    status.isOpen = pageAction.isOpen || false
    data.search.name = pageAction.searchName || ''
    //获取数据
    getList()
})
onBeforeUnmount(() => {
    //如果进入的不是子级页面则删除当前页面的动作
    if (data.routePath.split('/')[1] != route.path.split('/')[1]) {
        localStorage.removeItem(data.routePath)
    }
})
watch([() => status.showId, () => status.isOpen, () => data.search.name], () => {
    //保存到localstorage
    func.jsonStorage(data.routePath, {
        showId: status.showId,
        isOpen: status.isOpen,
        searchName: data.search.name
    })
});
//搜索
const searchList = computed(() => {
    let filter = []
    if (data.search.name) {
        filter = data.list.filter((item) => {
            return item.names.toLowerCase().includes(data.search.name.toLowerCase())
        })
    }
    if (data.list.length > 0 && filter.length == 0) status.loadTip = '未查询到数据'
    return filter
})

//获取数据
const getList = () => {
    status.loadTip = '加载中...'
    //开始请求
    axios.get('/articleType/list').then(response => {
        data.tree = func.listToTree(response.data.list)
        //树形转换成list以供搜索使用
        const list = func.treeToList(data.tree)
        for (const i in list) {
            const item = list[i]
            const names = item.father.map(item2 => item2.name).join('/');
            item.names = (names ? names + '/' : '') + item.name
        }
        data.list = list
        //更新列表加载提示
        status.loadTip = response.data.total > 0 ? '加载完成' : '未查询到数据'
    }).catch(error => {
        status.loadTip = '服务器返回出错'
    })
}
//按照id删除
const deleteItems = (ids) => {
    if (typeof ids != 'object') ids = [ids]//后台需要接收格式为:[2,3,4]
    axios.post('/articleType/delete', {
        ids: ids
    }).then(response => {
        sys.tip(response, () => { getList() })
    })
}
//导出数据
const exportList = () => {
    sys.download('/articleType/listExport', {
        params: route.query,
        name: '文章类型列表.xlsx',
    })
}
</script>

<template>
    <div>
        <Breadcrumb :title="['文章', '类型']" :path="['/article/list']" :back="route.query.back" />
        <el-card class="list">
            <template #header>
                <div class="flex-2">
                    <el-space>
                        <el-input class="search" v-model="data.search.name" placeholder="输入类型名称搜索" clearable />
                        <el-button type="warning" plain @click="() => { data.search.name = '' }">清空</el-button>
                        <el-tooltip effect="dark" content="刷新数据" placement="top">
                            <el-link :underline="false" @click="getList()">
                                <Refresh />
                            </el-link>
                        </el-tooltip>
                        <el-checkbox v-if="!data.search.name" v-model="status.showId" label="显示ID" />
                        <el-checkbox v-if="!data.search.name" v-model="status.isOpen" label="展开" />
                    </el-space>
                    <el-space class="last-child-mr0">
                        <el-button type="primary" plain
                            @click="router.push('/articleType/edit?back=' + encodeURIComponent(route.fullPath))"
                            v-if="$power('/articleType/edit')">添加</el-button>
                        <el-dropdown trigger="click" v-if="$power('/articleType/listExport')">
                            <el-button type="primary" plain>
                                <span>更多操作</span>
                                <Down />
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="exportList()"
                                        v-if="$power('/articleType/listExport')">导出所有类型</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-space>
                </div>
            </template>
            <Table v-show="data.search.name != ''" :list="searchList" :loadTip="status.loadTip"
                @deleteItems="deleteItems" />
            <Tree v-show="data.search.name == ''" :tree="data.tree" :loadTip="status.loadTip" :showId="status.showId"
                :isOpen="status.isOpen" @deleteItems="deleteItems" />
        </el-card>
    </div>
</template>

<style scoped lang="scss"></style>
